<template>
  <div>
      <el-row style="background-color: #f7f8fB;line-height: 40px;color: #999999;font-size: 16px">
        <el-col :span="2" :offset="3" ><i class="el-icon-s-home" style="font-size: 18px"></i>&nbsp;<span @click="shou">商城首页</span></el-col>
        <el-col :span="1" :offset="11">异议反馈</el-col>
        <el-col :span="1"><i class="el-icon-phone-outline">客户服务</i></el-col>
        <el-col :span="1">我的商城</el-col>
        <el-col :span="1">消息推送</el-col>
      </el-row>
      <el-row style="background-color: #0190df;height: 130px">
        <el-col :span="4" :offset="3">
          <img src="../img/goodsLogo.png" style="width: 350px;margin-left: 10px;margin-top: 10px">
        </el-col>
        <el-col :span="4" :offset="3" style="margin-top: 30px;">
          <el-input placeholder="请输入内容" style="width: 500px" v-model="sou">
            <template slot="append">
              <el-button style="background-color: #3b99fc;color: white;border-radius: 0;width: 92px;font-size: 16px" @click="chazhao">搜索</el-button>
            </template>
          </el-input>
          <br><br>
          <a style="color: black">德玛仕厨房设备</a>
          <a style="color: black;margin-left: 20px">全棉时代女工卫生用品</a>
        </el-col>
        <el-col :span="4" :offset="2">
          <el-button style="background-color: #f7f8fb;border-radius: 20px;margin-top: 35px;width: 150px;height: 45px" @click="gouwu">我的购物车
            <el-badge :value="numberAll" class="item"></el-badge></el-button>
        </el-col>
      </el-row>
    <div style="background-color: whitesmoke;width: 1300px;margin-left: 350px">
      <el-row style="margin-top: 20px;background-color: #0190df;height: 50px;font-size: 20px;line-height: 50px;font-weight: 600">
        <el-col :span="3" style="color: white">首页</el-col>
        <el-col :span="3" style="color: white">最新商品</el-col>
        <el-col :span="3" style="color: white"><span @click="ding">我的订单</span></el-col>
      </el-row>
      <el-row>
        <el-col :span="18" :offset="3" style="margin-top: 60px;font-size: 20px">
            <el-steps :active="flag" align-center :finish-status="error">
              <el-step>
                <template slot="description">
                  <span style="font-size: 20px;line-height: 40px">买家下单</span>
                </template>
              </el-step>
              <el-step>
                <template slot="description">
                  <span style="font-size: 20px;line-height: 40px">买家付款</span>
                </template>
              </el-step>
              <el-step>
                <template slot="description">
                  <span style="font-size: 20px;line-height: 40px">商家发货</span>
                </template>
              </el-step>
              <el-step>
                <template slot="description">
                  <span style="font-size: 20px;line-height: 40px">交易成功</span>
                </template>
              </el-step>
            </el-steps>
          </el-col>
      </el-row>
      <div style="border: 3px solid red;width: 90%;margin-left: 60px;margin-top: 30px">
        <el-row style="margin-top: 20px">
          <el-col :span="3" style="font-size: 20px;font-weight: 600">订单详情</el-col>
        </el-row>
        <el-row>
          <el-col :span="3" :offset="2" style="font-size: 20px;margin-top: 20px;">订单编号 :</el-col>
          <el-col :span="5" style="font-size: 20px;margin-top: 20px;width: 200px;margin-left: 30px">{{goodsOrder.gorderId}}</el-col>
          <el-col :span="3" :offset="2" style="font-size: 20px;margin-top: 20px;margin-left: 110px">订单日期 :</el-col>
          <el-col :span="3" style="font-size: 20px;margin-top: 20px">{{goodsOrder.gorderTime}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="3" :offset="2" style="font-size: 20px;margin-top: 20px">收件人 :</el-col>
          <el-col :span="5" style="font-size: 20px;margin-top: 20px">{{goodsOrder.name}}</el-col>
          <el-col :span="3" :offset="2" style="font-size: 20px;margin-top: 20px">收货地址 :</el-col>
          <el-col :span="3" style="font-size: 20px;margin-top: 20px">{{goodsOrder.gorderAddr}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="3" :offset="2" style="font-size: 20px;margin-top: 35px">订单金额 :</el-col>
          <el-col :span="5" style="font-size: 22px;font-weight: 600;margin-top: 35px;color: red">￥{{goodsOrder.gorderPrice}}.00</el-col>
          <el-col :span="3" :offset="2" style="font-size: 20px;margin-top: 35px">订单状态 :</el-col>
          <el-col :span="3" style="font-size: 20px;margin-top: 35px;font-weight: 600;color: #5199FD" v-if="goodsOrder.gorderFlag==0">未支付</el-col>
          <el-col :span="3" style="font-size: 20px;margin-top: 35px;font-weight: 600;" v-if="goodsOrder.gorderFlag==1">待收货</el-col>
          <el-col :span="3" style="font-size: 20px;margin-top: 35px;font-weight: 600;color: #f56c6c" v-if="goodsOrder.gorderFlag==2">已取消</el-col>
        </el-row>
        <el-row style="margin-top: 20px">
          <el-col :span="3" style="font-size: 20px;font-weight: 600">商品信息</el-col>
        </el-row>
        <el-row style="border: 3px solid blue;margin-top: 20px;line-height: 50px;width: 88%;margin-left: 70px">
          <el-col :span="4" :offset="1" style="font-size: 20px;">商品图片</el-col>
          <el-col :span="3" style="font-size: 20px;">商品名称</el-col>
          <el-col :span="3" style="font-size: 20px;">商品数量</el-col>
          <el-col :span="3" style="font-size: 20px;">商品单价</el-col>
          <el-col :span="3" style="font-size: 20px;">商品小计</el-col>
          <el-col :span="5" :offset="1" style="font-size: 20px;">商品描述</el-col>
        </el-row>
        <div style="margin-bottom: 40px">
          <el-row v-for="(goods,index) in goodsList" style="border: 3px solid blue;border-top-style: none;width: 88%;margin-left: 70px;height: 150px;line-height: 150px;">
            <el-col :span="4" :offset="1" style="height: 100px">
              <img :src="goods.gorderitemPic" width="120px" height="120px" style="margin-top: 15px">
            </el-col>
            <el-col :span="3" style="font-size: 20px;">{{goods.gorderitemName}}</el-col>
            <el-col :span="3" style="font-size: 20px;">{{goods.gorderitemNum}}</el-col>
            <el-col :span="3" style="font-size: 20px;color: red">￥{{goods.gorderitemPrice}}.00</el-col>
            <el-col :span="3" style="font-size: 20px;color: red;font-weight: 600">￥{{goods.gorderitemPrice*goods.gorderitemNum}}.00</el-col>
            <el-col :span="5" :offset="1" style="font-size: 18px;line-height: 30px;margin-top: 30px;text-indent: 40px;text-align: left">{{goods.gorderitemInfo}}</el-col>;
          </el-row>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "goodsOrderItem",
  data(){
    return{
        goodsList:[{}],
        numberAll:0,
        goodsOrder:{},
        sou:'',
        flag:0,
        error:'finish'
    }
  },
  methods:{
    findAll(){
      this.numberAll = localStorage.getItem('numAll');
      const Id = this.$route.query.gorderId;
      this.$axios.get('/gorderItem/selectOne',{params:{gorderId:Id}}).then(res=>{
        this.goodsList = res.data.data
        console.log(this.goodsList)
      })
    },
    findOrder(){
      const Id = this.$route.query.gorderId;
      this.$axios.get('/gorder/findOne',{params:{gorderId:Id}}).then(res=>{
        this.goodsOrder = res.data.data
        if (this.goodsOrder.gorderFlag==0){
          this.error = 'finish'
          this.flag=2
        }else if (this.goodsOrder.gorderFlag==1){
          this.error = 'finish'
          this.flag=3
        }else {
          this.error = 'error'
          this.flag=1
        }
        console.log(this.goodsOrder)
      })
    },
    shou(){
      this.$router.push('/goods')
    },
    chazhao(){
      if (this.sou==''){
        return
      }
      this.$axios.get('/goods/selectLike',{params:{src:this.sou}}).then(res=>{
        this.$router.push({path:'/goodsList',query: {data:res.data.data}})
      })
    },
    quanju(){
      this.$axios.get('/cart/findAllByUid').then(res=>{
        this.numberAll = res.data.data.length
      })
    },
    gouwu(){
      this.$router.push('/goodsCart')
    },
    ding(){
      this.$router.push('/goodsOrder')
    }
  },
  mounted() {
    this.findAll()
    this.quanju()
    this.findOrder()
  }
}
</script>

<style scoped>
.el-step__head.is-text {
  width: 20px;
  height: 20px;
}
</style>
